<template>
  <div class="c-bg-sgray">
    <div class="fixTop">
      <new-search-bar
        :placeholder="'请输入成员昵称'"
        @search='startSearch'
        @cancel='startSearch'
      ></new-search-bar>
    </div>
    <div class="c-pt92 c-pb124">
      <div class="c-w100 c-bg-white c-ph24">
        <template v-for="(item, index) in friendsList">
          <div class="c-flex-row c-aligni-center c-hh120 c-bd-b1" :key="index" @click="handleClickChangeCircle(item, index)">
            <div class="c-flex-1 c-flex-row c-aligni-center">
              <img :class="item.status == -1 ? 'gray':''" class="c-ww64 c-hh64 imgCloseBig c-brp50" v-lazy="item.headimgurl || require('@/assets/defult_head.png')" alt="">
              <span class="c-fs24 c-ml20 c-text-ellipsis1" :class="item.status == -1 ?'c-fc-sgray':'c-fc-xblack'">{{item.nickname}}</span>
              <img v-if="item.isAnswer == 1 && circleData != null && companyAuth.enableQuestionModule == 1" class="c-ww80 c-ml12" :src="require('@/assets/i/wap/circle/answer_m.png')" alt="">
            </div>
            <div class="c-flex-row c-flex-center c-ww32 c-hh32">
              <span class="iconfont c-fs32 c-fc-sgray" v-show="item.isChecked != 1">&#xe797;</span>
              <span class="iconfont c-fs32 theme-fc" v-show="item.isChecked == 1">&#xe6b1;</span>
            </div>
          </div>
        </template>
      </div>
      <loading-status-tem
        :dataStatus="dataStatus"
        noDataText="暂无数据"
        class="c-bg-sgray"
      ></loading-status-tem>
    </div>
    <div class="c-pf c-p-b0 c-w100 c-maxw640 c-hh124 c-bg-white c-ph24 c-flex-row c-justify-center c-aligni-center">
      <div class="c-fs28 c-fc-white theme-bg-gradient c-w100 c-hh64 c-br30 c-flex-row c-justify-center c-aligni-center c-opacity100" @click="handleClickSubmitChange()">确认</div>
    </div>
  </div>
</template>

<script>
import newSearchBar from "@/components/templates/common/newSearchBar.vue"
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { utilJs } from "@/utils/common.js";
const LIMIT = 10;
let page = 1;
let searchText; //搜索输入框
export default {
  name: "CircleChange",
  components: {
    newSearchBar,
    loadingStatusTem
  },
  data() {
    return {
      dataStatus: 'HAS_MORE_DATA',
      theme: localStorage.getItem("colorName") || 'mb5_default',
      circleId: '',
      circleData: null,
      shareSetting: null,
      friendsList: [],
      circleChangeName: '',
      circleMemberId: '',
      circleStatus: '',
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
    }
  },
  created() {
    utilJs.appShare(this);
  },
  deactivated() {
    window.removeEventListener('scroll', this.windowScrollFunction);
  },
  activated() {
    setDocumentTitle("全部圈友");
    this.circleId = this.$route.query.circleId || '';
    this.circleData = null;
    this.shareSetting = null;
    this.circleChangeName = '';
    this.circleMemberId = '';
    this.circleStatus = '';
    this.getCircleData();
    this.initData();
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  methods: {
    initData() {
      page = 1;
      searchText = '';
      this.dataStatus = 'HAS_MORE_DATA';
      this.friendsList = [];
      this.getLists();
    },
    // 跳转到圈子
    handleClickCircleFeed() {
      this.$routerGo(this, "push", {
        path: "/homePage/circle/circleFeed",
        query: {
          id: this.circleId
        }
      })
    },
    // 获取圈子信息
    getCircleData() {
      utilJs.getMethod(global.apiurl + `circle/details/${this.circleId}?type=2`, res => {
        this.circleData = res || null;
        this.shareSetting = res.shareSetting || null;
        this.circleId = res.circleId;
        this.wechatShare();
      }, failRes => {
        this.handleClickCircleFeed();
        this.wechatShare();
      });
    },
    getLists() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod(`${global.apiurl}circle/getCircleMembersList/${this.circleId}?&nickname=${searchText}&page=${page}&limit=${LIMIT}&filterCircleMaster=1`, res => {
        if (page == 1) {
          this.friendsList = res.data;
        } else {
          this.friendsList = [...this.friendsList, ...res.data];
        }
        if (res.total * 1 == this.friendsList.length) {
          this.dataStatus = res.total * 1 == 0 ? "NO_DATA" : "NO_MORE_DATA";
        } else {
          this.dataStatus = 'HAS_MORE_DATA';
          page++;
        }
      }, failRes => {
        this.dataStatus = "DATA_ERROR"
      })
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.friendsList.length > 0) {
          this.getLists();
        }
      });
    },
    // 转移圈子
    handleClickChangeCircle(item, index) {
      this.circleChangeName = item.nickname;
      this.circleMemberId = item.circleMemberId;
      this.circleStatus = item.status;
      this.friendsList.forEach((item, i) => {
        this.$set(this.friendsList[i], 'isChecked', -1);
      })
      this.$set(this.friendsList[index], 'isChecked', 1);
    },
    // 确认转移
    handleClickSubmitChange() {
      let _this = this;
      if (this.circleChangeName == '') {
        _this.$showCjToast({
          text: '请选择成为新圈主的用户',
          type: "warn",
        })
        return;
      }
      if (this.circleStatus == -1) {
        _this.$showCjToast({
          text: '该用户已被加入黑名单，不能成为新圈主',
          type: "warn",
        })
        return;
      }
      let message = `确定选择${this.circleChangeName}为新圈主，您将由圈主身份变为普通成员(此操作不可撤销)`;
      _this.$cjConfirm({
        title: '提示', //
        titleCenter: true, //标题是否居中
        message: message,
        messageCenter: true, //内容是否居中
        showMasker: true, //是否显示透明背景
        clickCloseModal: false, //是否点击透明背景关闭弹窗
        showCancelButton: true, //是否显示取消按钮
        cancelButtonText: '', //取消按钮文本
        confirmButtonText: '确定', //确认按钮文本
        onConfirm() {
          _this.transferCircleMaster();
        },
        onCancel() {
        },
      })
    },
    // 转移圈主
    transferCircleMaster() {
      let _this = this;
      utilJs.postMethod(`${global.apiurl}circle/transferCircleMaster`, {
        circleId: this.circleId,
        circleMemberId: this.circleMemberId
      }, res => {
        _this.$showCjToast({
          text: '转移成功',
          type: "success",
        }).then(() => {
          _this.$routerGo(_this, "replace", {
              path: "/homePage/circle/circleFeed",
              query: {
                id: _this.circleId
              }
            })
        })
      })
    },
    startSearch(e) {
      page = 1;
      this.friendsList = [];
      searchText = e.searchValue;
      this.getLists();
    },
    //分享
    wechatShare: function () {
      let title = this.shareSetting ? this.shareSetting.shareTitle : (this.circleData ? this.circleData.name : window.localStorage.getItem("shareTitle"));
      let shareImg = this.shareSetting ? this.shareSetting.sharePic : (this.circleData ? this.circleData.avatar : window.localStorage.getItem("shareLogo"));
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/circle/circleFeed?refereeId=${localStorage.getItem("userId")}&id=${this.circleId}`;
      let shareDesc = this.circleData ? this.circleData.intro : '点击查看详情';
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc);
    },
    //手机端分享
    appShare: function () {
      let title = this.shareSetting ? this.shareSetting.shareTitle : (this.circleData ? this.circleData.name : window.localStorage.getItem("shareTitle"));
      let shareImg = this.shareSetting ? this.shareSetting.sharePic : (this.circleData ? this.circleData.avatar : window.localStorage.getItem("shareLogo"));
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/circle/circleFeed?refereeId=${localStorage.getItem("userId")}&id=${this.circleId}`;
      let shareDesc = this.circleData ? this.circleData.intro : '点击查看详情';
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    }
  }
}
</script>

<style lang="less" scoped>
.fixTop {
  position: fixed;
  z-index: 100;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  left: 0;
  right: 0;
  max-width: 16rem;
  margin: 0 auto;
}
.c-pt92 {
  padding-top: 2.3rem;
}
.gray {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}
</style>